<template>
  <!--    我是首页-->
  <!--    <el-button type="primary" @click="gotolink">登录</el-button>-->
    <!--最顶部 导航条+巨幕+幻灯片-->
    <div class="row">
      <div class="col-md-12 column">
        <!-- 导航条 -->
        <nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top" style="font-size: 20px;" :style="topNavBg">
          <div class="container-fluid">
            <span class="mr-3 iconbox iconsmall fill rounded-circle bg-white text-black shadow border-0"><i class="fa fa-book fa-lg" aria-hidden="true"></i></span>
            <a class="navbar-brand ml-1" href="/" style="font-size: 25px;color:white"><strong>嘉庚考研圈</strong></a>
            <!-- Toggler -->
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Collapse -->
            <div class="navbar-collapse collapse ml-3" id="navbarColor02">
              <ul class="navbar-nav mr-auto d-flex align-items-center" id="nav_contain">
                <li class="nav-item">
                  <a class="nav-link" href="">考研资讯</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">院校信息</a>
                </li>
                <!-- 有下拉菜单-->
                <li class="nav-item dropdown "  data-toggle="hover">
                  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    交流讨论社区 </a>
                  <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown" style="font-size:19px;">
                    <a class="dropdown-item" href="" style="color: black">学长学姐说</a>
                    <a class="dropdown-item" href="" style="color: black">日常生活</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">闲置转卖</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">积分中心</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">常见问题</a>
                </li>
              </ul>
              <!--                搜索框-->
              <form class="form-inline my-2 my-lg-0 mr-4">
                <input class="form-control mr-sm-2" type="search" placeholder="请输入内容" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
              </form>
              <!--                小图标-->
              <ul class="navbar-nav" id="navbar_ul">
                <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-commenting" aria-hidden="true"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-bell fa-lg" aria-hidden="true"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-user-circle fa-lg" aria-hidden="true"></i></a></li>
              </ul>
            </div>
          </div>
        </nav>
        <header>
          <div class="jumbotron jumbotron-lg jumbotron-fluid position-relative">
            <!--                 style="line-height: 200px;-->
            <!--                  /*background-image: linear-gradient(to bottom, #5788d6, #4b9edb, #56b1db, #72c2d9, #94d1d8, #a3d7dd, #b2dee2, #c1e4e7, #c3e4ed, #c7e3f1, #cee2f5, #d5e1f6);*/-->
            <!--                  ;margin-left: -16px;margin-right: -15px">-->
            <div class="text-white">
              <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"  style="margin-top:150px;">
                <div class="col" >
                  <h1 class="title">迟到的梦想，&nbsp;现在补回来！</h1>
                  <h3 class="pt-5" style="font-weight: bold;">2023考研倒计时 136天</h3>
                  <div>
                    <a href="#" class="btn btn-lg btn-outline-light btn-round mr-4" style="width: 150px;font-weight:bold;">Login</a>
                    <a href="#" class="btn btn-lg btn-outline-light btn-round" style="width: 150px;font-weight:bold;">Register</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>
      </div>
    </div>
</template>

<script>
import back from '@/assets/back1.jpg'
import "@/assets/css/main.css"
import "@/assets/css/aos.css"

export default {
  name: "myheader",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      imgs:{
        back
      },
      //设置导航栏变色
      topNavBg: {
        backgroundColor: ''
      }
    };
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    gotolink(){
      //点击跳转至上次浏览页面
      // this.$router.go(-1)
      //指定跳转地址
      this.$router.replace('/Login')
    },
    // 滚动页面时触发导航变色
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 设置背景颜色的透明度
      if (scrollTop) {
        this.topNavBg.backgroundColor = `rgba(183, 193, 172,
	        	${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
      } else if (scrollTop === 0) {
        this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
      }
    },
    // 滚动之前重置
    beforeDestroy () {
      window.removeEventListener('scroll', this.handleScroll)
    },
  },
}
</script>

<style scoped>
.topnav
{
  /*z-index: 100;*/
  /*color: inherit;*/
  /*opacity: 0.9;*/
}
/*下拉菜单悬停*/
/*悬停显示*/
.navbar-nav .dropdown:hover>.dropdown-menu {
  display: block;
}
/*虚化菜单按钮  就是 让点击无效的意思*/
.navbar-nav .dropdown>.dropdown-toggle:active
{
  pointer-events: none;
}
.navbar-nav>ul
{
  margin-left: 0px;
}
#nav_contain>li>a
{
  margin-left:20px;
  font-size: 20px;
  color: white;
}
#nav_contain>li>a:hover
{
  font-weight: bold;
}
/*小图标*/
#navbar_ul>li>a>i
{
  color: white;
}
#navbar_ul>li>a>i:hover
{
  color: #B7C1AC;
}
#navbar_ul>li
{
  margin-left: 13px;
}
/*大标题*/
.title
{
  margin-top: 40px;
  font-size: 57px;
  /*text-shadow: 3px 3px 0px #0e0b2b;*/
  /*font-weight: bold;*/
  color: ghostwhite;
  font-weight: 800;
}
.jumbotron
{
  background: url('~@/assets/back1.jpg') no-repeat center;
  background-size:cover;
  line-height: 300px;
  margin-left: -15px;
  margin-right: -15px
}
/*走马灯img*/
/*.carousel{*/
/*  box-shadow: 10px 10px 5px #888888;*/
/*}*/
a,li,ul,h1,h2,h3,h4,h5{
  font-family: YouYuan;
  color: white;
}
</style>
